import { $peopleList } from "@/api/policys/orderList";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import Page from "@/components/public/page/page";
import useNavigator from "@/hooks/useNavigator";
import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./insuredList.module.less";

export default defineComponent({
  setup() {
    const navigator = useNavigator();

    const state = reactive({
      toolbar: {
        left: ["refresh",],
        right: ["filter"],
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          width: "80px",
        },
        {
          title: "姓名",
          dataIndex: "name",
          align: "center",
          width: "200px",
        },
        {
          title: "证件类型",
          dataIndex: "id_type",
          align: "center",
          width: "130px",
        },
        {
          title: "证件号",
          dataIndex: "id_no",
          align: "center",
          width: "150px",
        },
      ],
      loading: false,
    })
    onMounted(() => {
      $peopleList({ order_no: navigator.route?.query.order_no }).then((res: any) => {
        state.dataSource = res.data || [];
      })
    })
    return () => (
      <Page>
        <CardWithTitle title="被保人清单" style={{ height: '100%' }}>
          <div class={styles.list}>
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={false}
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  //证件类型
                  if (column.dataIndex === "id_type") {
                    return record.id_type === '111' ?
                      <div>身份证</div>
                      :
                      <div>其他</div>
                      ;
                  }
                },
              }}
            />
          </div>

        </CardWithTitle>
      </Page>
    )
  }
})